import React, { Component } from 'react';
import data from '@/assets/data/map.json';
import * as echarts from 'echarts';
import { connect } from 'umi';
import pie from '@/assets/img/home/pie.png';
// import  'babel-loader!echarts/extension/bmap/bmap.js';
import 'echarts/extension/bmap/bmap.js';
import { loadBMap } from '@/assets/js/map';
import { Row, Card, Col, Statistic, Badge, Space, Modal, ConfigProvider, Button, Switch } from 'antd';
import { Gauge, WordCloud, Liquid, RingProgress } from '@ant-design/charts';
import { NotificationOutlined } from '@ant-design/icons';
import numeral from 'numeral';
import { GridContent } from '@ant-design/pro-layout';
import { Line } from '@ant-design/plots';
import styles from './Home.less';
import HomeHander from '@/components/Home/HomeHander';
import HomeSideChart from '@/components/Home/HomeSideChart';
import HomeMainTip from '@/components/Home/HomeMainTip';
import MapChart from '@/components/MapChart';
import MapChartFull from '@/components/MapChartFull';
import Line_Chart from '@/components/Home/Comp/Line_Chart';
import Colum_Chart from '@/components/Home/Comp/Colum_Chart';
import Pie_Chart from '@/components/Home/Comp/Pie_Chart';
import Liquid_Chart from '@/components/Home/Comp/Liquid_Chart';
import ReactPlayer from 'react-player';
import HomeMonitorTab from '@/components/Home/HomeMonitorTab';
import SelectComp from '@/components/SelectComp'
import './Home.css'
class Home extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isSimpleMap: true
    }
  }
  GetShowFullSideChart(type) {
    switch (type) {
      case 'line':
        return <Line_Chart />;
      case 'colum':
        return <Colum_Chart />;
      case 'pie':
        return <Pie_Chart />;
      case 'lqiuid':
        return <Liquid_Chart />;
      default:
        return <></>;
    }
  }

  onCancelMOdel() {
    const { dispatch } = this.props;
    dispatch &&
      dispatch({
        type: 'home/ChangeModelVisibleEffect',
        payload: {
          chart_type: null,
          ModelVisible: false,
        },
      });
  }

  render() {
    const { dict, ModelVisible, Full_Chart_Type } = this.props;

    return (
      <div className={styles.HomeBody}>
        <GridContent style={{ width: '100%', height: '100%' }}>
          <Row>
            <HomeHander />
          </Row>
          <Row className={styles.HomeMain}>
            <Col span={6} className={styles.HomeMainSide}>
              {/* <HomeSideChart card_title="水质实况" chart_type="line" /> */}
              <HomeMonitorTab />
            </Col>
            <Col span={12}>
              {/* <Row className={styles.HomeMainCenterTip}>
                <HomeMainTip />
              </Row> */}
              <Row className={styles.HomeMainCenterMap}>
                <img
                  src={require('@/assets/img/home/pie.png')}
                  style={{ width: 80, position: 'absolute', top: 40, right: 25 }}
                />

                <SelectComp isSimpleMap={this.state.isSimpleMap} onChange={(v) => { this.setState({ isSimpleMap: v }) }} />

                {/* Json文件城市地图 */}
                <Row className={this.state.isSimpleMap ? 'mapActive mapComp' : 'mapHidden mapComp'} >
                  <MapChartFull />
                </Row>

                {/* 百度全景地图 */}
                <Row className={this.state.isSimpleMap ? 'mapHidden mapComp' : 'mapActiven mapComp'} >
                  <MapChart />
                </Row>
              </Row>
            </Col>
            <Col span={6} className={styles.HomeMainSide}>
              <HomeSideChart card_title="预警信息提示" chart_type="news" />
              <HomeSideChart card_title="预警历史信息" chart_type="pie" />
              {/* <HomeSideChart card_title="不同断面水质实时情况" chart_type="colum" /> */}
            </Col>
          </Row>

          <Modal
            className={styles.MaxSideModel}
            width={'60%'}
            bodyStyle={{ marginTop: 20, padding: '5%' }}
            title="水质实况"
            footer={null}
            onCancel={() => {
              this.onCancelMOdel();
            }}
            open={ModelVisible}
          >
            {ModelVisible && Full_Chart_Type != 'news'
              ? this.GetShowFullSideChart(Full_Chart_Type)
              : null}
          </Modal>
        </GridContent>
      </div>
    );
  }
}
export default connect(
  ({ global, home }) => ({
    dict: global.dict,
    Full_Chart_Type: home.Full_Chart_Type,
    ModelVisible: home.ModelVisible,
  }),
  (dispatch) => {
    return { dispatch };
  },
  null,
  { forwardRef: true },
)(Home);
